<template>
  <div>
    <h2>列表加载</h2>
    <ul>
      <li @click="handleClick('5')">5</li>
      <li @click="handleClick('6')">6</li>
      <li @click="handleClick('7')">7</li>
    </ul>
    <h2>reactive数组</h2>
    <ul>
      <li v-for="item in tableData" :key="item.t_plant_pk">
        {{ item.plant_name }}
      </li>
    </ul>
    <h2>ref数组</h2>
    <ul>
      <li v-for="item in tableDataRef" :key="item.t_plant_pk">
        {{ item.plant_name }}
      </li>
    </ul>
  </div>
</template>
    
    <script lang="ts">
import ajax from "@/util/request";

import { reactive,ref } from "vue";

export default {
  setup() {
    const tableData = reactive<any>([]);
    const tableDataRef = ref<any>([]);

    const handleClick = function (t_cat_pk: string) {
      ajax("/plant/queryList", { t_cat_pk }).then((res) => {
        if (res.data.status > 0) {
          // 清空现有数据
          tableData.length = 0;
          tableData.push(...res.data.result_data);

          tableDataRef.value = res.data.result_data;
        }
      });
    };

    return {
      tableData,
      handleClick,
      tableDataRef
    };
  },
};
</script>
    
    <style scoped>
</style>